import {Button, Col, Row} from "antd";
import {useNavigate} from "react-router-dom";
import store from "../../../store";//哪个组件需要用到store的数据就在哪个组件引入
import {observer} from 'mobx-react'
import ConfirmDialog from "../confirmDialog";
import React, {useState} from "react";  //观察者,被它所包裹的组件就是响应式的，改了数据页面就会更新
const ListOperation = () => {
    const navigate=useNavigate()
    //是否显示确认上架对话框
    const [isUpperShelfModalOpen, setIsUpperShelfModalOpen] = useState(false);
    //是否显示确认下架对话框
    const [isLowerShelfModalOpen, setIsLowerShelfModalOpen] = useState(false);
    //是否显示确认删除对话框
    const [isDelModalOpen, setIsDelModalOpen] = useState(false);

    //点击上架对话框确定按钮
    const handleUpperShelfOk = () => {
        store.content.setContentState('上架')
        setIsUpperShelfModalOpen(false);
    };
    //点击上架对话框取消按钮
    const handleUpperShelfCancel = () => {
        setIsUpperShelfModalOpen(false);
    };
    //点击下架对话框确定按钮
    const handleLowerShelfOk = () => {
        store.content.setContentState('下架')
        setIsLowerShelfModalOpen(false);
    };
    //点击下架对话框取消按钮
    const handleLowerShelfCancel = () => {
        setIsLowerShelfModalOpen(false);
    };
    //点击删除对话框确定按钮
    const handleDelOk = () => {
        store.content.delContent()
        setIsDelModalOpen(false);
    };
    //点击删除对话框取消按钮
    const handleDelCancel = () => {
        setIsDelModalOpen(false);
    };
    return <Row gutter={16}>
        <Col>
            <Button type="primary" onClick={()=> {
                navigate('/home/addContent')
            }}>新增</Button>
        </Col>
        <Col>
            <Button type="primary" onClick={()=>{
                setIsUpperShelfModalOpen(true);
            }
            }>上架</Button>
        </Col>
        <Col>
            <Button type="primary" onClick={()=>{
                setIsLowerShelfModalOpen(true);
            }
            }>下架</Button>
        </Col>
        <Col>
            <Button type="primary" onClick={()=>{
                setIsDelModalOpen(true);
            }
            }>删除</Button>
        </Col>
        <ConfirmDialog
            isModalOpen={isUpperShelfModalOpen}
            title={'上架'}
            text={'你确定要上架选中的'+store.content.selectRowKeys.length+'个选项吗？'}
            handleOk={handleUpperShelfOk}
            handleCancel={handleUpperShelfCancel}
        />
        <ConfirmDialog
            isModalOpen={isLowerShelfModalOpen}
            title={'下架'}
            text={'你确定要下架选中的'+store.content.selectRowKeys.length+'个选项吗？'}
            handleOk={handleLowerShelfOk}
            handleCancel={handleLowerShelfCancel}
        />
        <ConfirmDialog
            isModalOpen={isDelModalOpen}
            title={'删除'}
            text={'你确定要删除选中的'+store.content.selectRowKeys.length+'个选项吗？'}
            handleOk={handleDelOk}
            handleCancel={handleDelCancel}
        />
    </Row>
}
export default observer(ListOperation)